<template>
  <div class="box">
    <div style="width: 73%;display: flex;">
      <div style="width: 100%;height: 60px; margin-left: 10px;text-align: left;">
        <img width="60" height="60"
          src="https://gimg3.baidu.com/topone/src=https%3A%2F%2Fbkimg.cdn.bcebos.com%2Fsmart%2F8cb1cb1349540923dd5444bee40ec609b3de9d82e3ef-bkimg-process%2Cv_1%2Crw_1%2Crh_1%2Cmaxl_800%2Cpad_1%3Fx-bce-process%3Dimage%2Fresize%2Cm_pad%2Cw_348%2Ch_348%2Ccolor_ffffff&refer=http%3A%2F%2Fwww.baidu.com&app=2011&size=f200,200&n=0&g=0n&er=404&q=75&fmt=auto&maxorilen2heic=2000000?sec=1711472400&t=6eea31d32b02407026651bdc6265716b"
          alt="" style="border-radius: 16%;">
      </div>
    </div>
    <div style="width: 8%;">
      <router-link to="/createRoom">
        <el-button :disabled="userList[0].ustatusID === 0" type="primary" size="mini"
          style="height: 45px;text-align: center;margin-top:5px;font-size: 19px">创建房间</el-button>
      </router-link>
    </div>
    <div  style="width: 6%;margin-top: 7.5px;" @click="show">
      <svg t="1713359749647" class="icon" viewBox="0 0 1146 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="29105" width="40" height="40">
        <path
          d="M928.41984 666.91072c-33.0752-20.33664-112.2304-56.9344-64.55296-137.70752 42.35264-67.072 75.40736-94.37184 75.32544-206.52032 0.08192-106.45504-73.76896-217.98912-182.90688-217.98912 0 0-30.80192-2.94912-43.2128 0 0 0 152.3712 190.89408-33.83296 415.82592 0 0-83.47648 94.74048 51.89632 157.9008 135.35232 63.1808 261.69344 164.70016 266.19904 187.26912 4.5056 22.54848 6.77888 53.61664 6.77888 53.61664h96.4608c19.3536 0 32.27648-15.95392 32.27648-34.4064v-57.38496c0-41.984-62.17728-74.3424-204.43136-160.60416M703.2832 706.72384c-41.5744-25.55904-141.08672-71.55712-81.12128-173.09696 53.22752-84.31616 94.78144-118.64064 94.65856-259.62496C716.96384 140.20608 624.128 0 486.93248 0c-150.75328 0-243.58912 140.20608-243.46624 274.0224-0.12288 140.96384 41.45152 175.3088 94.65856 259.60448 59.96544 101.53984-39.56736 147.5584-81.16224 173.09696C78.17216 815.2064 0 855.81824 0 908.61568v72.11008C0 1003.9296 16.24064 1024 40.57088 1024H919.7568c24.33024 0 40.57088-20.04992 40.57088-43.27424v-72.11008c0-52.77696-78.15168-93.45024-257.00352-201.89184"
          fill="#117FFF" p-id="29106"></path>
      </svg>
    </div>
    <div style="width: 6%;">
      <el-popover placement="bottom" width="250" trigger="click">
        <div slot="reference" style="width: 57px;cursor: pointer;">
          <svg t="1712633320463" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3349" width="55" height="55">
            <path
              d="M821.248 691.2L512 870.4l-309.248-179.2v-57.344c21.504-8.704 36.352-29.696 36.352-55.296 0-31.744-27.648-59.904-59.904-59.904s-59.904 27.648-59.904 59.904c0 25.6 14.848 47.104 36.352 55.296V716.8l352.256 202.752 4.096 2.048 354.304-204.8v-153.6h-45.056v128z m47.104-301.056V307.2L512 102.4 157.696 307.2v153.6h45.056V332.8L512 153.6l309.248 179.2v57.344c-21.504 8.704-36.352 29.696-36.352 55.296 0 31.744 27.648 59.904 59.904 59.904s59.904-27.648 59.904-59.904c0-25.088-14.848-46.592-36.352-55.296z"
              fill="#2B85FB" p-id="3350"></path>
            <path
              d="M362.496 320c-23.552-4.096-42.496 12.8-42.496 36.352V588.8c0 64 53.248 117.248 117.248 117.248h146.944c70.656 0 128-61.952 119.296-134.144-8.704-61.952-64-104.448-123.904-104.448h-53.248c-6.656 0-10.752-4.096-10.752-10.752V360.448c0-16.896-12.8-34.304-29.696-38.4-23.552-4.096-42.496 12.8-42.496 36.352v98.304c0 6.144-4.096 10.752-10.752 10.752h-29.696c-6.144 0-10.752-4.096-10.752-10.752V360.448c0.512-21.504-12.288-38.4-29.696-40.448z m245.76 234.496c16.896 0 29.696 12.8 29.696 29.696s-12.8 29.696-29.696 29.696-29.696-12.8-29.696-29.696 12.288-29.696 29.696-29.696z m-94.208 0c16.896 0 29.696 12.8 29.696 29.696s-12.8 29.696-29.696 29.696-29.696-12.8-29.696-29.696 12.8-29.696 29.696-29.696z m-98.304 0c16.896 0 29.696 12.8 29.696 29.696s-12.8 29.696-29.696 29.696-29.696-12.8-29.696-29.696 12.8-29.696 29.696-29.696z"
              fill="#2B85FB" p-id="3351"></path>
          </svg>
          <el-badge :is-dot="news" style="margin-top: -70px;margin-left: -8px;" />
        </div>
        <el-empty v-if="friendApply.length<=0" style="width: 250px;height: 250px;margin: 0;padding: 0;"
          description="暂无好友申请"></el-empty>
        <div v-for="item in friendApply" :key="item.fid" style="width: 100%;height: 80px; margin-top: -11px;">
          <div style="width: 100%;height: 65px;background-color: #ededed;border: 1px solid #e7e7e7;">
            <span style="color: black; font-size: 15px;"><span style="color: red;">【{{ item.user.uname
                }}】</span>向您发来好友申请</span>
            <div style="width: auto;height: auto;position: absolute;left: 10px;bottom: 2.5px;">
              共有{{ applyCount }}条申请
            </div>
            <el-button type="primary" plain
              style="width: 100%;text-align: center; height: 35px;line-height: 5px; margin-top: 11px;font-size: 16px;"
              @click="showApply(item)">查看详情</el-button>

            <div style="position: absolute;bottom: 0px;left: 40%;">
              <el-pagination small layout="prev,next" @prev-click="prev" @next-click="next" :page-size="1"
                :total="applyCount" />
            </div>
          </div>
        </div>
      </el-popover>
    </div>
    <div v-for="item in userList" :key="item.uid" style="width: 55px;height: 55px; border-radius: 100%;">
      <el-image v-if="userList[0].ustatusID === 0 ? false : true"
        style="border-radius: 100%;width: 55px;height: 55px;border: 2px solid black;" :src="item.uphoto"
        :preview-src-list="[item.uphoto]">
      </el-image>
      <router-link  v-if="userList[0].ustatusID === 0" to="/login">
        <el-button style="margin-top: 10px;">前往登录</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import EventBus from '@/util/EventBus'
export default {
  data () {
    return {
      userList: [JSON.parse(sessionStorage.getItem('user'))],
      news: false,
      friendApply: [],
      applyCount: 0,
      page: 1
    }
  },
  methods: {
    getNewNews () {
      axios.defaults.withCredentials = true

      axios({
        url: 'http://152.136.143.223:9091/user/apply',
        method: 'get',
        params: {
          page: this.page,
          uid: this.userList[0].uid
        }
      }).then((res) => {
        console.log(res.data.data)
        if (res.data.data != null) {
          if (res.data.data.length > 0) {
            this.friendApply = res.data.data
            this.news = true
          } else {
            this.friendApply = []
            this.news = false
          }
        }
      })
    },
    showApply (item) {
      axios.defaults.withCredentials = true
      axios({
        url: 'http://152.136.143.223:9091/user/' + item.uid,
        method: 'get'
      }).then((res) => {
        EventBus.$emit('getFriendDetails', res.data.data, item)
      })
    },
    applyNumber () {
      axios.defaults.withCredentials = true
      axios({
        url: 'http://152.136.143.223:9091/user/applyNumber',
        method: 'get',
        params: {
          uid: this.userList[0].uid
        }
      }).then((res) => {
        this.applyCount = res.data.data
      })
    },
    prev (row) {
      this.page = row
    },
    next (row) {
      this.page = row
    },
    show () {
      if (this.userList[0].ustatusID === 0) {
        this.$message('登录后享更多权限')
      } else {
        EventBus.$emit('show', true)
      }
    }
  },
  beforeMount () {
    this.getNewNews()
    this.applyNumber()
  },
  watch: {
    page () {
      this.getNewNews()
    }
  },
  mounted () {
    EventBus.$on('friendApply', (boolean) => {
      if (boolean) {
        this.page = 1
        this.getNewNews()
        this.applyNumber()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 65px;
  padding-top: 5px;
  text-align: center;
  background-color: #011130;
  box-shadow: 0 0 4px 0;
  display: flex;
}
</style>
